<template>
  <div class="main">
    <!--面包屑-->
    <div class="top">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>项目群</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>点位列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-card class="card">
        <!--标题文字-->
        <div class="headerTitle">
          <div>点位列表</div>
        </div>

        <div class="search">
          <el-input v-model="input" placeholder="请输入点位名称搜索" :suffix-icon="Search" style="width: 300px"
            @keyup.enter="getSpotList" />
          <el-button class="addbtn" @click="addVisible = true">新建点位</el-button>
        </div>

        <div class="table" style="padding: 0 20px">
          <el-table :data="state.tableData" height="600px" border :header-cell-style="{
            background: '#b4c7e7',
            color: 'black',
            fontSize: '12px',
            fontWeight: '500',
          }" :row-class-name="tableRowClassName">
            <el-table-column prop="spotName" label="点位名称" align="center" width="180" />

            <el-table-column prop="spotType" label="系统类型" align="center" width="180" />

            <el-table-column prop="manufactor" label="厂家" align="center" width="150" />

            <el-table-column prop="signals" label="通讯方式" align="center" width="150" />

            <el-table-column prop="agreement" label="协议方式" align="center" width="150" />

            <el-table-column prop="sensor" label="传感器编码" align="center" width="150" />

            <el-table-column prop="gateway" label="点位类型" align="center" width="170" />

            <el-table-column prop="deviceName" label="所属设备ID" align="center" width="170" />

            <!-- <el-table-column
              prop="regionName[regionId]"
              label="区域选择"
              align="center"
              width="100"
            /> -->
            <el-table-column label="区域选择" align="center">
              <template v-slot="scope">
                <span>
                 {{ regionNameList[ String(scope.row.regionId)] }}
                </span>
              </template>

            </el-table-column>
            <el-table-column label="在线状态" align="center">
              <template v-slot="scope">
                <div style="text-align: center">
                  <span v-if="scope.row.status == 1">在线</span>
                  <span v-if="scope.row.status == 2">离线</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <span class="edit" @click="handleEdit(scope.row)">编辑</span>
                <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
                  title="确认要删除吗?" @confirm="handleDell(scope.row.id)">
                  <template #reference>
                    <span class="dell">删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div>
          <el-dialog v-model="addVisible" title="新建点位" width="30%" :before-close="handleClose">
            <el-divider class="line" />

            <el-form>
              <el-form-item label="点位名称" class="lineheight">
                <el-input v-model="state.form.spotName" placeholder="请输入产品名称" input-style="margin-left:15px" />
              </el-form-item>
              <el-form-item label="系统类型" class="lineheight">
                <el-select v-model="state.form.spotType" clearable placeholder="请输入系统类型"
                  style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in options" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>

              <el-form-item label="厂家" class="lineheight">
                <el-input v-model="state.form.manufactor" placeholder="请输入点位厂家"
                  input-style="width:100%;margin-left:43px" />
              </el-form-item>

              <el-form-item label="通信方式" class="lineheight">
                <el-input v-model="state.form.signals" placeholder="请输入通信方式"
                  input-style="margin-left:15px;width:100%" />
              </el-form-item>

              <el-form-item label="区域选择" class="lineheight">
                <el-select v-model="state.form.regionId" placeholder="请选择区域" style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in state.areaList" :key="item.id" :label="item.regionName" :value="item.id" />
                </el-select>
              </el-form-item>

              <el-form-item label="协议方式" class="lineheight">
                <el-input v-model="state.form.agreement" placeholder="请输入协议方式"
                  input-style="margin-left:15px;width:100%" />
              </el-form-item>

              <el-form-item label="传感器编码" class="lineheight">
                <el-input v-model="state.form.sensor" placeholder="请输入传感器编码" />
              </el-form-item>

              <el-form-item label="点位类型" class="lineheight">
                <el-input v-model="state.form.gateway" placeholder="请输入点位类型"
                  input-style="margin-left:15px;width:100%" />
              </el-form-item>

              <el-form-item label="所属设备ID" class="lineheight">
                <el-select v-model="state.form.deviceId" placeholder="请选择所属设备ID" style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in state.deviceList" :key="item.id" :label="item.productName"
                    :value="item.id" />
                </el-select>
              </el-form-item>

              <el-divider class="ment" />
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addVisible = false" class="cancle">取消</el-button>
                <el-button type="primary" @click="handleAddPoint" class="save">保存</el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        <div>
          <el-dialog v-model="editVisible" title="编辑点位" width="30%" :before-close="handleClose">
            <el-divider class="line" />

            <el-form>
              <el-form-item label="点位名称" class="lineheight">
                <el-input v-model="state.upform.spotName" placeholder="请输入产品名称"
                  input-style="margin-left:15px; width: 100%" />
              </el-form-item>

              <el-form-item label="系统类型" class="lineheight">
                <el-select v-model="state.upform.spotType" clearable placeholder="请输入系统类型"
                  style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in options" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>

              <el-form-item label="厂家" class="lineheight">
                <el-input v-model="state.upform.manufactor" placeholder="请输入点位厂家"
                  input-style="margin-left:43px;width: 100%" />
              </el-form-item>

              <el-form-item label="通信方式" class="lineheight">
                <el-input v-model="state.upform.signals" placeholder="请输入通信方式"
                  input-style="margin-left:15px; width: 100%" />
              </el-form-item>

              <el-form-item label="区域选择" class="lineheight">
                <el-select v-model="state.upform.regionId" placeholder="请选择区域" style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in state.areaList" :key="item.id" :label="item.regionName" :value="item.id" />
                </el-select>
              </el-form-item>

              <el-form-item label="协议方式" class="lineheight">
                <el-input v-model="state.upform.agreement" placeholder="请输入协议方式"
                  input-style="margin-left:15px; width: 100%" />
              </el-form-item>

              <el-form-item label="传感器编码" class="lineheight">
                <el-input v-model="state.upform.sensor" placeholder="请输入传感器编码" />
              </el-form-item>

              <el-form-item label="点位类型" class="lineheight">
                <el-input v-model="state.upform.gateway" placeholder="请输入点位类型"
                  input-style="margin-left:15px; width: 100%" />
              </el-form-item>

              <el-form-item label="所属设备ID" class="lineheight">
                <el-select v-model="state.upform.deviceId" placeholder="请选择所属设备ID"
                  style="margin-left: 15px; width: 100%">
                  <el-option v-for="item in state.deviceList" :key="item.id" :label="item.productName"
                    :value="item.id" />
                </el-select>
              </el-form-item>

              <el-divider class="ment" />
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="editVisible = false" class="cancle">取消</el-button>
                <el-button type="primary" @click="handleEditPoint" class="save">保存</el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        <div class="page">
          <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
            :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  SpotList,
  AddSpot,
  EditSpot,
  DeleteSpot,
  // DeviceListSpot,
  AreaListSpot,
  SpotListAll,
} from "@/api/model/equipment/point";

const input = ref("");

const currentPage = ref(1);

const pageSize = ref(20);
const total = ref(0);

const addVisible = ref(false);

const editVisible = ref(false);
let regionNameList = {}
const options = ref(["冷热源", "冷水", "热水", "冷却水", "板换", "末端舒适性"]);
const state = reactive({
  // 列表数据
  tableData: [],

  // 设备列表
  deviceList: [],

  // 区域列表
  areaList: [],

  // 添加点位
  form: {},

  // 编辑点位
  upform: {},
});

onMounted(() => {
  getAreaListSpot();
  getSpotList();
  getDeviceListSpot();
});

// 获取点位列表
const getSpotList = async () => {
  let res = await SpotList({
    spotName: input.value,
    page: currentPage.value,
    limit: pageSize.value,
  });
  console.log(res.data, "获取点位列表");
  if (res.status == 200) {
    state.tableData = res.data.data.list;
  }
  total.value = res.data.data.total;
};

// 获取设备列表
const getDeviceListSpot = async () => {
  let { data: res } = await SpotListAll();
  console.log(res, 448);
  if (res.code == 200) {
    state.deviceList = res.data;
  }
};

// 获取区域列表
const getAreaListSpot = async () => {
  let res = await AreaListSpot();
  console.log(res.data.data, 6666666666666666666666);
  if (res.status == 200) {
    state.areaList = res.data.data.list;
    state.areaList.forEach((item) => {
      console.log(item);
      regionNameList[item.id] = item.regionName
    })
  }
};

// 添加点位
const handleAddPoint = async () => {
  let res = await AddSpot(state.form);
  if (res.status == 200) {
    getSpotList();
    addVisible.value = false;
  }
  state.form = {};
};
// 斑马纹表格
const tableRowClassName = ({ row, rowIndex }) => {
  console.log(row);
  if (rowIndex % 2 == 0) {
    return "warning-row";
  } else {
    return "success-row";
  }
};
// 删除点位
const handleDell = async (e) => {
  let res = await DeleteSpot({ ids: e });
  if (res.status == 200) {
    getSpotList();
  }
};

const handleEdit = (e) => {
  state.upform = e;
  editVisible.value = true;
};

// 编辑点位
const handleEditPoint = async () => {
  let res = await EditSpot(state.upform);
  if (res.status == 200) {
    getSpotList();
    editVisible.value = false;
  }
};

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  currentPage.value = val;
  console.log(currentPage.value);
  getSpotList();
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  console.log(currentPage.value);
  getSpotList();
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #eaf2fa;
  overflow: hidden;
}

.top {
  margin-left: 30px;
  margin-top: 5px;
}

.card {
  width: 100%;
  height: auto !important;
  height: 750px;
  margin-top: 15px;
  padding-bottom: 15px;
}

.card :deep(.el-card__body) {
  padding: 0 !important;
  height: auto !important;
  height: 750px;
  padding-bottom: 15px;
}

.el-card {
  height: auto !important;
  height: 750px;
  padding-bottom: 15px;
}

:deep(.el-form-item__label) {
  white-space: pre-line;
}

.edit {
  margin-right: 30px;
  font-size: 13px;
  color: #606fa6;
  cursor: pointer;
}

.dell {
  font-size: 13px;
  color: #fccb56;
  cursor: pointer;
}

.search {
  display: flex;
  padding: 0 20px;
  justify-content: flex-end;
  margin-top: 20px;
}

.addbtn {
  width: 100px;
  height: 30px;
  color: white;
  background-color: #8faadc;
  margin-left: 20px;
}

.table {
  margin-top: 10px;
  height: 600px;
  overflow: auto;
}

/deep/.warning-row {
  background: #fff;
}

/deep/.success-row {
  background: #f5f7fa;
}

:deep(.el-dialog__title) {
  color: #7b6ea5;
  letter-spacing: 1px;
}

.line {
  position: absolute;
  top: 40px;
  left: 0px;
}

.el-form-item__label {
  white-space: pre-line;
}

.upload {
  margin-left: 370px;
}

.ment {
  position: absolute;
  left: 0px;
}

.lineheight {
  height: 20px;
}

.page {
  margin-left: 950px;
  margin-top: 10px;
}

.cancle {
  background-color: #cccccc;
  color: white;
  width: 100px;
}

.save {
  background-color: #8faadc;
  color: white;
  width: 100px;
}
</style>
